<template>
  <div class="blue-city-select-popup" v-show="cityPopup">
    <div class="blue-city-select-box">

      <div class="blue-city-text-box">
        <span class="select-location">请选择城市</span><img src="../images/login_close.png" class="select-pic"
                                                       @click="closeCityModal"/>
      </div>

      <div class="blue-city-address-box">

        <div class="blue-city-address-province">
          <div class="address-province-box" v-for="(item,m) in itemList" :key="m">
            <span :class="{'address-active-line':navId == m}"></span>
            <span class="address-province-text" :class="{'address-active':navId == m}" @click="selectTree(m,item.name,item.city)">{{item.name}}</span>
          </div>
        </div>

        <div class="blue-city-address-city">
          <div class="address-city-box">
            <span class="address-city-text" v-for="(item,c) in cityList" :key="c"
                  @click="selectCity(item.area,item.name)">{{item.name}}</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import treeList from "../../static/province-tree"
  import {removeSessionStore} from "../config/util";

  export default {
    props: {
      showCityModal: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        itemList: treeList,
        navId: 0,//被选中一级
        cityList: [],
        townList: [],
        cityName: "",
        cityPopup: false,
        tempList:[]
      }
    },
    created() {
      this.cityPopup = this.showCityModal;
    },
    mounted() {
      this.selectTree(0, '', this.itemList[0].city);
    },
    methods: {
      selectTree(index, name, cityList) {//省
        this.navId = index;
        this.cityName = "";
        if ("北京" == name || "天津" == name || "上海" == name || "重庆" == name) {
          this.cityList = [];
          this.cityName = name;
          this.tempList = cityList[0].area;
          let cityObj = {};
          cityObj.name = name;
          this.cityList.push(cityObj);
        } else if ("全国" == name) {
          this.cityList = [];
          this.cityName = name;
          let cityObj = {};
          cityObj.name = name;
          this.cityList.push(cityObj);
        } else {
          this.cityList = cityList;
        }
      },
      selectCity(townList, name) {//市
        if(townList){
          this.townList = townList;
        }else{
          this.townList = this.tempList;
        }

        if("全国" == name){
          this.townList = [];
        }
        this.cityName = name;
        this.cityPopup = false;
        removeSessionStore("searchTown");
        this.$emit("commitCity",name,this.townList);
      },
      closeCityModal() {
        this.cityPopup = false;
        this.$emit("closeCityModal");
      }
    },
    watch: {
      showCityModal(newVal, oldVal) {
        this.cityPopup = newVal;
      },
      cityPopup(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .blue-city-select-popup {
    .fixed-center(fixed, 100, 0.5);
    .blue-city-select-box {
      .wh(900px, 554px);
      background: rgba(252, 254, 255, 1);
      border-radius: 4px;
      .blue-city-text-box {
        .wh(100%, 52px);
        display: flex;
        align-items: center;
        .select-location {
          padding-left: 18px;
          .size-color(16px, #333333)
        }
        .select-pic {
          margin-left: auto;
          margin-right: 15px;
          .wh(20px, 20px)
        }
      }
      .blue-city-address-box {
        display: flex;
        .wh(100%, 502px);
        .blue-city-address-province {
          .wh(160px, 100%);
          background: #F5F5F5;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          .address-province-box {
            .wh(100%, auto);
            display: flex;
            flex-direction: column;
            position: relative;
            &:nth-child(1) {
              margin-top: 8px;
            }
            .address-province-text {
              height: 40px;
              padding-left: 18px;
              line-height: 40px;
              .size-color(14px, #333333);
              &:hover{
                cursor: pointer;
                color: #3CAFFF;
                background: #FCFEFF;
              }
            }
            .address-active-line{
              position: absolute;
              left: 0;
              background: #3CAFFF;
              .wh(3px,40px);
            }
            .address-active {
              color: #3CAFFF;
              background: #FCFEFF;
            }
          }
        }
        .blue-city-address-city {
          display: flex;
          .wh(750px, 480px);
          padding-top: 21px;
          padding-left: 20px;
          .address-city-box {
            width: 676px;
            height: 480px;
            span {
              display: block;
              float: left;
              padding-bottom: 27px;
              padding-right: 24px;
              .size-color(14px, #333333);
              &:hover {
                cursor: pointer;
                color: #3CAFFF;
              }
            }
          }
        }
      }
    }
  }
</style>
